function ImageRepository(callback){
    this.images = {
        clouds : null        
    };
    var COUNT = 1;
    var numLoaded = 0;
    
    var onImageLoaded = function(){        
        if(++numLoaded == COUNT){
            callback();
        }
    };
    
    this.images.clouds = new Image();
    this.images.clouds.onload = onImageLoaded;
    this.images.clouds.src = "./img/clouds.png";
}


function Background(ctx){            
    var context = ctx;
    var width = context.canvas.width;
    var height = context.canvas.height;
    
    this.draw = function(){
        drawLandscape();
    };
    
    var drawLandscape = function(){
        context.save();
        var gradient=context.createLinearGradient(0,0,0,height);
        gradient.addColorStop(0,"rgb(20,118,174)");
        gradient.addColorStop(0.661, "rgb(130,186,219)");
        gradient.addColorStop(0.662,"rgb(155,177,112)");
        gradient.addColorStop(1,"rgb(118,177,3)");
        context.fillStyle=gradient;
        context.fillRect(0,0,width,height);  
        context.restore();          
    };
}

function Foreground(ctx){
    var context = ctx;
    var width = context.canvas.width;
    var height = context.canvas.height;
    
    
    
    this.draw = function(){
        drawSun();
        drawClouds();
    };
    
    var drawSun =  function(){
        context.save();
        context.beginPath();
        context.fillStyle = "rgba(255,255,128,1.0)";
        context.strokeStyle = "rgba(255,255,128,1.0)";
        context.shadowColor = "rgba(255,255,128,0.8)";
        context.shadowBlur = 100;
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;
        context.arc(128,128,30,0,Math.PI*2);
        context.fill();
        context.stroke();
        context.restore();        
    };
    
    var drawClouds = function(){
        context.save();
        context.drawImage(imageRepository.images.clouds, 0, 0);        
        context.restore();        
    };
    
}



var imageRepository = new ImageRepository(main);

function main(){
    var bgContext = document.getElementById('bg').getContext('2d');
    var fgContext = document.getElementById('fg').getContext('2d');
    
    var background = new Background(bgContext);    
    background.draw();        
    var foreground = new Foreground(fgContext);    
    foreground.draw();        
}

